<template>
  <view class="bg">
    <view class="top_search" v-show="false">
      <u-search
        placeholder="搜索关键词"
        v-model="keyword"
        shape="square"
        bg-color="rgba(255, 255, 255, 1)"
        :show-action="false"
      ></u-search>
      <view class="search_screening">
        <image
          src="../../../static/images/common/screening.png"
          mode=""
        ></image>
        <view class="font">筛选</view>
      </view>
    </view>
    <view class="nodata" v-show="taskArr.length == 0">暂无更多数据</view>
    <view class="task_bg" v-show="taskArr.length > 0">
      <view class="sub_title">{{ title }}任务</view>
      <view
        v-for="(item, index) in taskArr"
        :key="index"
        class="task_one"
        @tap="details(index, item)"
      >
        <view class="task_left_top">
          <view class="task_round">
            <image src="../../../static/images/common/task.png" mode=""></image>
          </view>
          <view class="name">{{ item.name }}</view>
        </view>
        <view class="task_content">
          <view class="task_name">
            <view class="task_left">任务名称</view>
            <view class="task_right nameFont">{{ item.rwmc }}</view>
          </view>
          <view class="task_child">
            <view class="task_test">
              <view class="task_left">子事项</view>
              <view class="task_right childFont">{{ item.zsx }}</view>
            </view>
            <view class="task_test">
              <view class="task_left">状态</view>
              <view class="task_right childFont">
                <text>{{ item.zt }}</text>
                <view class="zt_type1" v-if="item.ztType === 1">逾期</view>
                <view class="zt_type2" v-if="item.ztType === 2">即将逾期</view>
              </view>
            </view>
            <view class="task_test">
              <view class="task_left">派发人</view>
              <view class="task_right childFont">{{
                item.createUserName
              }}</view>
            </view>
            <!-- <view class="task_test">
              <view class="task_left">taskUnitId</view>
              <view class="task_right childFont">{{
                item.taskUnitId
              }}</view>
            </view> -->
            <view class="task_test" v-show="roleId == '04'">
              <view class="task_left">承办人</view>
              <view class="task_right childFont">{{ item.xbdw }}</view>
            </view>
            <view class="task_test" v-show="roleId != '04'">
              <view class="task_left">承办单位</view>
              <view class="task_right childFont">{{ item.xbdw }}</view>
            </view>
            <view class="task_test">
              <view class="task_left">任务轮次</view>
              <view class="task_right childFont">{{ item.rwlc }}</view>
            </view>
            <view class="task_test">
              <view class="task_left">任务时限</view>
              <view class="task_right childFont">{{ item.rwsx }}</view>
            </view>
          </view>
          <view class="task_btnArr">
            <view
              v-show="roleId04 && userType"
              class="task_btn"
              @tap.stop="plane(item.taskUnitId, item.taskSubId)"
            >
              <image
                src="../../../static/images/common/plane.png"
                mode=""
              ></image>
              <view class="font">批转</view>
            </view>
            <view class="task_btn" @tap="details(index, item)">
              <image
                src="../../../static/images/common/task.png"
                mode=""
              ></image>
              <view class="font">详情</view>
            </view>
            <view class="task_btn" v-show="false">
              <image
                src="../../../static/images/common/more.png"
                mode=""
                class="more"
              ></image>
              <view class="font">更多</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 批转 -->
    <u-modal
      v-model="show"
      :show-cancel-button="true"
      :show-title="false"
      @confirm="confirmSubmit()"
    >
      <view class="popupModel">
        <view class="task_left_top">
          <view class="task_round">
            <image
              src="../../../static/images/common/plane.png"
              mode=""
            ></image>
          </view>
          <view class="name">批转</view>
        </view>
        <view class="popupContent">
          <view class="Content">
            <view class="name">经办人</view>
            <view>
              <ld-select
                v-if="show"
                :multiple="true"
                :list="sameSelectList"
                placeholder="请选择经办人"
                :clearable="false"
                v-model="selectid"
              ></ld-select
            ></view>
            <!-- <view @tap="testaaaa"
              >请选择 >
              <u-select
                v-model="showselect"
                :list="selectList"
                @confirm="confirmSelect"
              ></u-select>
            </view> -->
          </view>
          <view class="pizhuan">
            <view
              class="item"
              v-for="(item, index) in selecttext"
              :key="index + 200"
            >
              <view>{{ item }}</view>
              <view class="close" @tap="deleteSelect(index)">X</view>
            </view>
          </view>
        </view>
      </view>
    </u-modal>
    <u-toast ref="uToast" />
    <!-- 加载更多 -->
    <u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
  </view>
</template>

<script>
import {
  getTasklists,
  getEndorseList,
  getSaveTaskUsert,
  changetype,
} from "../../../request/dcxt";
import ldSelect from "@/components/ld-select/ld-select.vue";
export default {
  components: {
    ldSelect,
  },
  data() {
    return {
      title: "",
      taskArr: [],
      keyword: "",
      show: false,
      content: "东临碣石，以观沧海",
      taskUnitId: "",
      taskSubId: "",
      showselect: false,
      selecttext: [],
      selectid: [],
      sameSelectList: [],
      selectList: [],
      roleId04: true,
      userType: true,
      roleId: uni.getStorageSync("roleId"),
      //   分页
      type: "",
      status: "loadmore",
      iconType: "flower",
      loadText: {
        loadmore: "轻轻上拉",
        loading: "努力加载中",
        nomore: "实在没有了",
      },
      pageSize: 10,
      currentPage: 1,
    };
  },
  onLoad(option) {
    if (uni.getStorageSync("roleId") == "04") {
      this.roleId04 = false;
    }
    if (uni.getStorageSync("userType") == 1) {
      this.userType = false;
    }
    // 0.待签收,1待反馈,2已反馈
    this.type = option.type;
    // this.getData(option.type);
    if (option.type == 0) {
      this.title = "未签收";
      uni.setNavigationBarTitle({
        title: "未签收",
      });
    } else if (option.type == 1) {
      this.title = "未反馈";
      uni.setNavigationBarTitle({
        title: "未反馈",
      });
    } else {
      this.title = "已反馈";
      uni.setNavigationBarTitle({
        title: "已反馈",
      });
    }
  },
  onShow() {
    uni.startPullDownRefresh();
  },
  onPullDownRefresh() {
    var _this = this;
    setTimeout(function () {
      _this.currentPage = 1;
      _this.taskArr = []
      _this.getData(_this.type);
      uni.stopPullDownRefresh();
    }, 1000);
  },
  methods: {
    plane(taskUnitId, taskSubId) {
      this.taskUnitId = taskUnitId;
      this.taskSubId = taskSubId;
      var params = {
        userId: uni.getStorageSync("loginId"),
        taskUnitId: taskUnitId,
      };
      this.selectList = [];
      getEndorseList(params).then((res) => {
        var result = res.data.data;
        console.log("res.data.data");
        console.log(result);
        if (result.length > 0) {
          for (let i = 0; i < result.length; i++) {
            this.selectList.push({
              label: result[i].name,
              value: result[i].sysId,
            });
          }
          this.sameSelectList = JSON.parse(JSON.stringify(this.selectList));
          this.$nextTick(() => {
            this.show = true;
          });
        } else {
          this.$refs.uToast.show({
            title: "未找到批转人！",
            type: "error",
            duration: 2000,
          });
        }
      });
    },
    // 详情
    details(index, item) {
      changetype({
        sysId: item.sysId,
        loginerId: uni.getStorageSync("loginId"),
      }).then((res) => {
        console.log(res);
      });
      // console.log(item)
      var _this = this;
      console.log(item.imp, "13222222222222222222222222222222222222222");
      if (item.imp === 2 && item.unitType === "3") {
        uni.navigateTo({
          url: "../task/task?item=" + JSON.stringify(_this.taskArr[index]),
        });
      } else {
        uni.navigateTo({
          url: "../task/index?info=" + JSON.stringify(_this.taskArr[index]),
        });
      }
    },
    // 选择经办人
    confirmSelect(e) {
      for (let i = 0; i < this.selectList.length; i++) {
        if (this.selectList[i].label == e[0].label) {
          this.selectList.splice(i, 1);
        }
      }
      this.selecttext.push(e[0].label);
      this.selectid.push(e[0].value);
    },
    // 删除经办人
    deleteSelect(index) {
      this.selecttext.splice(index, 1);
      this.selectid.splice(index, 1);
      var sum = JSON.parse(JSON.stringify(this.sameSelectList));
      for (let i = 0; i < sum.length; i++) {
        for (let j = 0; j < this.selecttext.length; j++) {
          if (sum[i].label == this.selecttext[j]) {
            sum.splice(i, 1);
          }
        }
      }
      this.selectList = sum;
    },
    testaaaa() {
      for (let i = 0; i < this.selectList.length; i++) {
        for (let j = 0; j < this.selecttext.length; j++) {
          if (this.selectList[i].label === this.selecttext[j]) {
            this.selectList.splice(i, 1);
          }
        }
      }
      this.showselect = true;
    },
    // 保存批转
    confirmSubmit() {
      var params = {
        sysId: this.taskUnitId,
        taskSubId: this.taskSubId,
        taskUsers: this.selectid.join(","),
        loginerId: uni.getStorageSync("loginId"),
      };
      getSaveTaskUsert(params).then((res) => {
        if (res.data.code == 200) {
          this.$refs.uToast.show({
            title: "保存批转成功！",
            type: "success",
          });
        } else {
          this.$refs.uToast.show({
            title: "保存批转失败！",
            type: "error",
          });
        }
        this.sameSelectList = [];
        this.selectid = [];
      });
    },
    getData(type) {
      var params = {
        loginerId: uni.getStorageSync("loginId"),
        imp: "0",
        type: type,
        paging: {
          pageSize: this.pageSize,
          currentPage: this.currentPage,
        },
      };
      getTasklists(params).then((res) => {
        console.log("数据", res.data.data);
        console.log("页码", this.currentPage);
        var result = res.data.data;
        if (!result || result.length < 10) {
          this.status = "nomore";
        } else {
          this.status = "loadmore";
        }
        var arr = [];
        for (let i = 0; i < result.length; i++) {
          var qiantou;
          if (result[i].unitType == 1) {
            qiantou = "牵头";
          }
          if (result[i].unitType == 2) {
            qiantou = "协办";
          }
          if (result[i].unitType == 3) {
            qiantou = "督办";
          }
          arr.push({
            name: result[i].categoryName
              .replace("&ldquo;", "")
              .replace("&rdquo;", ""),
            rwmc: result[i].taskMainName
              .replace("&ldquo;", "")
              .replace("&rdquo;", ""),
            zsx: result[i].taskSubName
              .replace("&ldquo;", "")
              .replace("&rdquo;", ""),
            zt: this.getType(result[i].type),
            ztType: 2,
            xbdw:
              this.roleId == "04"
                ? result[i].deptName
                : result[i].deptName + "_" + qiantou,
            rwlc: result[i].timeRound,
            rwsx: "2021-01-18",
            taskUnitId: result[i].taskUnitId,
            taskSubId: result[i].taskSubId,
            createUser: result[i].createUser,
            imp: result[i].imp,
            unitType: result[i].unitType,
            taskMainId: result[i].taskMainId,
            createUserName: result[i].createUserName,
            sysId: result[i].sysId,
          });
        }
        this.taskArr.push(...arr);
      });
    },
    getType(data) {
      var result = "";
      switch (data) {
        case "0":
          result = "待签收";
          break;
        case "1":
          result = "待反馈";
          break;
        case "2":
          result = "已反馈";
          break;
        case "3":
          result = "退回";
          break;
        case "4":
          result = "完成";
          break;
        default:
          break;
      }
      return result;
    },
  },
  onReachBottom() {
    this.status = "loading";
    setTimeout(() => {
      this.currentPage++;
      this.getData(this.type);
    }, 2000);
  },
};
</script>

<style lang="scss" scoped>
.nodata {
  width: 100%;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(54, 48, 48, 0.7);
}

.top_search {
  width: 100vw;
  height: 120rpx;
  background-color: #3988ff;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;

  .search_screening {
    margin-left: 2%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 10rpx;
    }

    .font {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.7);
    }
  }
}

.popupModel {
  position: relative;
  padding-top: 48rpx;

  .task_left_top {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 150rpx;
    height: 48rpx;
    background: rgba(48, 116, 255, 0.2);
    border-radius: 24rpx;
    display: flex;
    align-items: center;

    .name {
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #3074ff;
      padding: 0 20rpx;
    }

    .task_round {
      width: 48rpx;
      height: 48rpx;
      background: #3074ff;
      z-index: 999;
      box-shadow: 2px 3px 12px 0px rgba(48, 116, 255, 0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }

  .popupContent {
    padding: 24rpx;

    .Content {
      width: 100%;
      display: flex;
      align-items: center;

      view {
        flex: 1;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .name {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #272b32;
      }
    }

    .pizhuan {
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-start;
      padding-left: 20rpx;
      padding-top: 20rpx;

      .item {
        width: 150rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #8992a1;
        border: 1rpx solid #b9bcc2;
        border-radius: 8rpx;
        margin-right: 25rpx;
        margin-bottom: 30rpx;
        position: relative;

        .close {
          width: 40rpx;
          height: 40rpx;
          font-size: 22rpx;
          line-height: 40rpx;
          text-align: center;
          position: absolute;
          top: -20rpx;
          right: -20rpx;
          background-color: red;
          color: white;
          border-radius: 50%;
        }
      }
    }
  }
}

.task_bg {
  // margin-top: 120rpx;

  .task_one {
    background-color: rgba(255, 255, 255, 1);
    padding: 24rpx;
    position: relative;
    margin-bottom: 40rpx;
    box-shadow: 0px 0px 24rpx 0px rgba(48, 116, 255, 0.1);
    border-radius: 24rpx 8rpx 8rpx 8rpx;
  }

  .task_left_top {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 252rpx;
    height: 48rpx;
    background: rgba(48, 116, 255, 0.2);
    border-radius: 24rpx;
    display: flex;
    align-items: center;

    .name {
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #3074ff;
      padding: 0 20rpx;
    }

    .task_round {
      width: 48rpx;
      height: 48rpx;
      background: #3074ff;
      z-index: 5;
      box-shadow: 2px 3px 12px 0px rgba(48, 116, 255, 0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }

  .task_content {
    width: 100%;
    margin-top: 40rpx;

    .task_btnArr {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 40rpx;
    }

    .task_btn {
      background: #3074ff;
      border-radius: 4rpx;
      padding: 8rpx 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 20rpx;

      image {
        width: 24rpx;
        height: 24rpx;
        margin-right: 10rpx;
      }

      .more {
        width: 24rpx;
        height: 6rpx;
        margin-right: 10rpx;
      }

      .font {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
      }
    }

    .task_name {
      display: flex;
      padding-bottom: 40rpx;
    }

    .task_child {
      padding: 20rpx 0;
      border-top: 1rpx solid rgba(231, 233, 240, 1);
      border-bottom: 1rpx solid rgba(231, 233, 240, 1);
    }

    .task_test {
      display: flex;
      margin: 20rpx 0;
    }

    .task_left {
      flex: 2;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #8e9cb3;
    }

    .nameFont {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #272b32;
    }

    .task_right {
      flex: 7;
      display: flex;
      align-items: center;

      .childFont {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #272b32;
      }

      .zt_type1 {
        margin-left: 10rpx;
        background: #f85f78;
        border-radius: 4rpx;
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
        padding: 0 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .zt_type2 {
        margin-left: 10rpx;
        background: rgba(250, 173, 51, 1);
        border-radius: 4rpx;
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
        padding: 0 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
